<template>
  <div>
    <el-dialog :title="title" v-model="visibleDialog" width="500px" :append-to-body="true" :close-on-click-modal="false" @close="cancelClick">
      <el-form :model="form" :rules="rules" @submit.native.prevent>
        <el-form-item label="名称" label-width="60px" prop="realName"
          ><el-input v-model.trim="form.realName" autocomplete="off"></el-input
        ></el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="yu-create-folder">
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
  pageType: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['confirmClick']);
const pageType = ref(props.pageType);

const visibleDialog = ref(false);
const form: any = ref({
  realName: ''
});
const title = ref('');
const rules = reactive({
  realName: [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }]
});
const cancelClick = () => {
  visibleDialog.value = false;
  form.value = {
    realName: ''
  };
};
const confirmClick = () => {
  if (!proxy?.$yuUtils.isValidFileName(form.value.realName)) {
    proxy.$modal.msgSuccess(`文件夹名称格式不正确,不能有/ \ : * ? '' < > |`);
    return;
  }
  emit('confirmClick', form.value);
  cancelClick();
};

defineExpose({
  visibleDialog,
  form,
  title,
  rules,
  cancelClick,
  confirmClick
});
</script>
<style scoped lang="scss"></style>
